<script lang="ts" setup>
import TabBar from "./components/tabBar/tabBar.vue";
import { getHeadStyle } from "../../utils/common/common";

// TDesign 组件导入

// TypeScript 接口定义
interface Banner {
  id: number;
  image: string;
  title: string;
}

interface ServiceCategory {
  id: number;
  image: string;
  name: string;
}

interface WikiArticle {
  id: number;
  title: string;
  image: string;
  likes: number;
}

interface Product {
  id: number;
  title: string;
  price: number;
  image: string;
}

const headStyle = getHeadStyle();

const imageCdn = "https://tdesign.gtimg.com/mobile/demos";
const swiperList = [
  {
    value: `${imageCdn}/swiper1.png`,
    ariaLabel: "图片1",
  },
  {
    value: `${imageCdn}/swiper2.png`,
    ariaLabel: "图片2",
  },
  {
    value: `${imageCdn}/swiper1.png`,
    ariaLabel: "图片1",
  },
  {
    value: `${imageCdn}/swiper2.png`,
    ariaLabel: "图片2",
  },
];

// 使用类型注解的响应式数据
// const swiperList = ref<Banner[]>([
//   { id: 1, image: "../../static/img/boy.jpg", title: "宠物美容特惠" },
//   { id: 2, image: "../../static/img/dargen.jpg", title: "新店开业优惠" },
//   { id: 3, image: "../../static/img/wofe.jpg", title: "宠物健康讲座" },
// ]);

const serviceCategories = ref<ServiceCategory[]>([
  {
    id: 1,
    image: "https://tdesign.gtimg.com/mobile/demos/example1.png",
    name: "宠物美容",
  },
  {
    id: 2,
    image: "https://tdesign.gtimg.com/mobile/demos/example1.png",
    name: "医疗服务",
  },
  {
    id: 3,
    image: "https://tdesign.gtimg.com/mobile/demos/example3.png",
    name: "宠物领养",
  },
  {
    id: 4,
    image: "https://tdesign.gtimg.com/mobile/demos/example1.png",
    name: "宠物用品",
  },
  {
    id: 5,
    image: "https://tdesign.gtimg.com/mobile/demos/example1.png",
    name: "健康管理",
  },
]);

const petWiki = ref<WikiArticle[]>([
  {
    id: 1,
    title: "猫咪日常护理指南",
    image: "https://tdesign.gtimg.com/mobile/demos/example1.png",
    likes: 128,
  },
  {
    id: 2,
    title: "狗狗饮食注意事项",
    image: "https://tdesign.gtimg.com/mobile/demos/example1.png",
    likes: 256,
  },
]);

const recommendProducts = ref<Product[]>([
  {
    id: 1,
    title: "精品猫粮",
    price: 99,
    image: "https://tdesign.gtimg.com/mobile/demos/example1.png",
  },
  {
    id: 2,
    title: "狗狗玩具",
    price: 29,
    image: "https://tdesign.gtimg.com/mobile/demos/example1.png",
  },
]);

// 类型安全的事件处理函数
const handleServiceClick = (category: ServiceCategory): void => {
  uni.navigateTo({
    url: `/pages/service/index?category=${category.id}`,
  });
};

const handleWikiClick = (article: WikiArticle): void => {
  uni.navigateTo({
    url: `/pages/wiki/detail?id=${article.id}`,
  });
};

const handleProductClick = (product: Product): void => {
  uni.navigateTo({
    url: `/pages/product/detail?id=${product.id}`,
  });
};

const searchValue = ref("");
const onSearch = (value: string) => {
  console.log("搜索:", value);
};
</script>

<template>
  <view class="home-page">
    <!-- 顶部状态栏适配 -->
    <view :style="headStyle">
      <view class="h-full" />
    </view>

    <!-- 搜索栏 -->
    <!-- <view class="search-wrapper">
      <t-search
        v-model="searchValue"
        placeholder="搜索宠物服务、商品"
        shape="round"
        @search="onSearch"
      />
    </view> -->
    <view class="search-wrapper">
      <t-search
        placeholder="搜索宠物服务、商品"
        shape="round"
        class="mx-4 my-3"
        @change="onSearch"
      />
    </view>

    <!-- 可滚动内容区域 -->
    <scroll-view
      scroll-y
      class="content-container"
      :enhanced="true"
      :show-scrollbar="false"
    >
      <!-- 轮播图 -->
      <t-swiper
        :autoplay="3000"
        :duration="500"
        :interval="3000"
        :navigation="{ type: 'dots' }"
        :list="swiperList"
        class="h-[300rpx]"
      >
      </t-swiper>

      <!-- 服务分类 -->
      <t-grid class="bg-white my-2" :column="5">
        <t-grid-item
          v-for="category in serviceCategories"
          :key="category.id"
          :text="category.name"
          :image="category.image"
          @click="handleServiceClick(category)"
        >
        </t-grid-item>
      </t-grid>

      <!-- 宠物百科 -->
      <view class="bg-white my-2 p-4">
        <view class="flex justify-between items-center mb-4">
          <view class="flex items-center">
            <view class="w-1 h-6 bg-yellow-400 mr-2"></view>
            <text class="text-lg font-bold">宠物百科</text>
          </view>
          <t-button variant="text" class="text-sm text-gray-400" size="small">更多 ></t-button>
        </view>
        <view class="space-y-4">
          <view
            v-for="article in petWiki"
            :key="article.id"
            @tap="handleWikiClick(article)"
            class="flex space-x-4"
          >
            <t-image
              :src="article.image"
              mode="aspectFill"
              class="w-[200rpx] h-[150rpx] rounded-lg"
            />
            <view class="flex-1 pl-4">
              <text class="text-sm leading-relaxed">{{ article.title }}</text>
              <view class="mt-2 flex items-center">
                <t-icon name="heart" size="small" class="text-primary" />
                <text class="text-xs text-gray-500 ml-1">{{
                  article.likes
                }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 推荐商品 -->
      <view class="bg-white my-2 p-4">
        <view class="flex justify-between items-center mb-4">
          <view class="flex items-center">
            <view class="w-1 h-6 bg-yellow-400 mr-2"></view>
            <text class="text-lg font-bold">为你推荐</text>
          </view>
          <t-button variant="text" class="text-sm text-gray-400" size="small">更多 ></t-button>
        </view>
        <t-grid :column="2" :gutter="16">
          <t-grid-item
            v-for="product in recommendProducts"
            :key="product.id"
            @click="handleProductClick(product)"
          >
            <t-image
              :src="product.image"
              mode="aspectFill"
              class="w-full h-[300rpx] rounded-lg"
            />
            <view class="p-2">
              <text class="text-sm block">{{ product.title }}</text>
              <text class="text-red-500 text-lg mt-1"
                >¥{{ product.price }}</text
              >
            </view>
          </t-grid-item>
        </t-grid>
      </view>
    </scroll-view>

    <!-- 底部导航栏 -->
    <view class="tab-wrapper">
      <TabBar />
    </view>
  </view>
</template>

<style lang="scss">
page {
  height: 100vh;
}

.home-page {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 162rpx);
  background-color: #f5f5f5;
}

.search-wrapper {
  padding: 20rpx;
  background-color: #ffffff;
  z-index: 1;
}

.content-container {
  flex: 1;
  height: calc(100vh - 240rpx);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

.tab-wrapper {
  background: white;
  z-index: 1;
}

::-webkit-scrollbar {
  display: none;
  width: 0 !important;
  height: 0 !important;
  -webkit-appearance: none;
  background: transparent;
}
</style>
